<!-- 添加用户 -->
<template>
  <!-- 对话框组件 -->
  <el-dialog v-model="dialogVisible" title="添加用户" width="30%" :before-close="handleClose">
    <el-form :model="form" label-width="auto" style="max-width: 300px" class="juzhong">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="username" clearable />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="password" type="password" autocomplete="off" clearable show-password />
      </el-form-item>
      <el-form-item label="用户身份" prop="userType">
        <el-radio-group v-model="userType">
          <el-radio value="用户">用户</el-radio>
          <el-radio value="管理员">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="submit" @click="register()">创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加对话框的操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="register">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {  ElMessage } from 'element-plus'
export default {
  name1: "register",
  data() {
    return {
      dialogVisible: false, // 添加对话框可见性控制
      fileName: "",
      message: "",
      username: "",
      password: "",
      userType: "",
    };
  },
  created() {
    this.customerName = '';
  },
  methods: {
    register() {
      // 添加输入验证
      if (!this.username || !this.password || !this.userType) {
        ElMessage.warning('请填写完整的用户信息');
        return;
      }

      // 验证密码是否为六位数字
      const passwordRegex = /^\d{6}$/;
      if (!passwordRegex.test(this.password)) {
        ElMessage.warning('密码必须为六位数字');
        return;
      }
      
      // 创建要发送的数据对象
      const userData = {
        username: this.username,
        password: this.password, 
        userId: this.userId,
        userType: this.userType,
        isDelete: "0"
      };

      this.axios
        .post("/register1", userData)
        .then((response) => {
          if (response.data.status === 200) {
            ElMessage.success(response.data.message);
            this.dialogVisible = false;
            this.$emit('register-success');
            // 清空表单
            this.resetForm();
          } else {
            ElMessage.error(response.data.message);
          }
        })
        .catch((error) => {
          ElMessage.error(error.data.message);
        });
    },

    // 添加重置表单方法
    resetForm() {
      this.username = '';
      this.password = '';
      this.userType = '';
    }
  }
};
</script>

<style scoped>
.juzhong {
  text-align: center;
  margin: auto;
}

</style>